<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言板</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="js/jquery.min.js"></script>
		<script
		  type="text/javascript"
		  src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/message.css">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div class="nav">
			<a href="index.html"><img class="home_img" src="./img/主页.png" /></a>
			<a href="editMessage.html"><img class="home_img" src="./img/set.png" /></a>
			<div class="row">
				<img src="./img/message.png" >
				<div class="h1">留言板</div>
			</div>
		</div>
		<div id="app">
			<div class="top">
			<el-input
			  type="text"
			  autosize
			  placeholder="请输入留言人或者邮箱"
			  v-model="eduMessage.fromPeople">
			</el-input>
			<div style="margin: 20px 0;"></div>
			<el-input
			  type="textarea"
			  :autosize="{ minRows: 4, maxRows: 4}"
			  placeholder="留下你想说的话....."
			  v-model="eduMessage.message">
			</el-input>
			 <el-button type="success" @click="sendMessage" icon="el-icon-check" circle style="border-radius: 6px;width: 100px;"></el-button>
			</div>
			<table class="center">
				<tr v-for="(message,index) in messageData">
					<td align="left">
						<div class="box">
						<div class="tou">
							<img class="avatar" :src="imgUrl()"/>
							<div class="name">
								<div>{{message.fromPeople}}</div>
								<div>第 {{index+1}}楼</div>
							</div>
							<template slot-scope="scope">
							</template>
						</div>
						<div class="message">{{message.message}}</div>
						<div class="time">
							<div>{{message.insertDate}}</div>
						</div>
						</div>
					</td>
				</tr>
			</table>
				
			
			<!-- 分页 -->
			<el-pagination
					:current-page="page"
					:page-size="pageSize"
					:total="total"
					style="padding: 30px 0; text-align: center"
					layout="total, prev, pager, next, jumper"
					@current-change="getAllmessage"
			/>
		</div>
		<div>
		
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				//分页数据
				page:1,
				pageSize:10,
				total:0,
				eduMessage:{//留言的信息
					fromPeople: '',//留言人
					message: '',//留言信息
				},
				messageData: []
			},
			methods:{
				delete(index,row){//文件删除的方法
					//console.log(row.fileId)
					//给用户做提示 的确认按钮
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						console.log("删除文件")
						//调用接口删除文件
						axios.delete("/message?id="+row.id).then(resp=>{
							this.$message({
								type:"success",
								message:"删除成功!"
							})
							//再次重新获取数据
							this.getAllmessage()
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});

				},
				getAllmessage(page = 1){//获取所有文件的方法
					this.page = page
					axios.get("/message/getPage?page="+this.page+"&"+"pageSize="+this.pageSize
					).then(resp=>{
						//给表单列表赋值
						// console.log(resp.data.data.list.records)

						this.messageData=resp.data.data.page.records
						//给总页码赋值
						this.total=resp.data.data.page.total
						//console.log(resp.data)
					}).catch(error=>{
						this.$message.error('网络出错,请刷新页面重试');
					})
				},
				sendMessage(){//发送留言的方法
					axios.post("/message/save",this.eduMessage).then(resp=>{
						console.log(resp.data)
						if (resp.data.data){
							//提示用户添加成功
							this.$message({
								type:"success",
								message:"留言成功!"
							})
						}else {
							this.$message({
								type:"error",
								message:resp.data.message
							})
						}
						//重新获取数据 刷新页面
						this.getAllmessage()
						//清空 填写的表单
						this.eduMessage={}
					})
				},
				imgUrl() {
					var num = Math.round(Math.random()*4);
				    return './img/tou'+num+'.png'
				}
			},
			created(){
				this.getAllmessage()
			}
		})
	</script>
</html>
